<template>
	<view class="scanningRecord">
		<view class="dateTabs">
			<view v-for="(item,i) in dateTabs" :key="i" :class="activeDate == item.id ? 'active tab' : 'tab'"
				@click="changeDate(item.id)">{{item.value}}</view>
		</view>
		<view class="container">
			<view class="userList" v-for="(item,i) in userList" :key="i">
				<view class="info">
					<image :src="item.imgUrl"></image>
					<view class="name">{{item.name}}{{item.phone}}</view>
					<view class="level" :class="item.level == 1 ? 'level tourist' : 'level'">{{switchLevel(item.level)}}</view>
				</view>
				<view class="cont" v-for="(lItem,lI) in item.list" :key="lI">
					<view class="dot"></view>
					<view class="oper">{{switchOper(lItem.status)}}</view>
					<view class="time">{{lItem.time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getScanningCode
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				dateTabs: [{
					id: 0,
					value: '今日'
				}, {
					id: 1,
					value: '昨日'
				}, {
					id: 2,
					value: '近一周'
				}, {
					id: 3,
					value: '近一月'
				}],
				activeDate: 0,
				userList: [],
				currentDate:null
			}
		},
		onLoad() {
			
			const dd = new Date()
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			this.currentDate = y + '-' + m + '-' + d
			this.getScanningCode()
		},
		methods: {
			async getScanningCode(){
				const data = {
					storeId:3,
					currentDate:this.currentDate,
					type:this.activeDate //1-当前天 2-七天 3-一个月
				}
				const {
					data: res
				} = await getScanningCode(data)
				this.userList = res.data.slice(0,20)
				console.log(this.userList)
			},
			changeDate(id) {
				this.activeDate = id
				this.getScanningCode()
			},
			switchLevel(id) {
				switch (id) {
					case 1:
						return '游客'
					case 2:
						return '普通会员'
					case 3:
						return '银卡会员'
					case 4:
						return '金卡会员'
					case 5:
						return '白金卡会员'
				}
			},
			switchOper(id){
				switch (id) {
					case 1:
						return '开门'
					case 2:
						return '开台'
					case 3:
						return '关台'
					case 4:
						return '充值'
				}
			}
		}
	}
</script>

<style lang="less">
	.scanningRecord {
		.dateTabs {
			padding: 13rpx 32rpx;
			background: #fff;
			display: flex;

			.tab {
				height: 42rpx;
				padding: 0 20rpx;
				color: #5B5B5B;
				font-size: 24rpx;
				line-height: 42rpx;
				background: #F6F6F6;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.active {
				background: #DE1645;
				color: #fff;
			}
		}
		.container{
			margin: 32rpx;
			.userList{
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;
				.info{
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;
					image{
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
					}
					.name{
						font-size: 28rpx;
						color: #171717;
						margin-left: 18rpx;
					}
					.level{
						margin-left: 16rpx;
						padding: 0 18rpx;
						height: 34rpx;
						background: rgba(230,0,18,0.1);
						border-radius: 8rpx;
						font-size: 20rpx;
						color: #E60012;
						line-height: 34rpx;
					}
					.tourist{
						background: #F6F6F6;
						color: #5B5B5B;
					}
				}
				.cont{
					padding-left: 100rpx;
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;
					.dot{
						width: 10rpx;
						height: 10rpx;
						background: #DE1645;
						border-radius: 50%;
						margin-right: 18rpx;
					}
					.oper{
						font-size: 24rpx;
						color: #1E1E1E;
						margin-right: 18rpx;
					}
					.time{
						font-size: 24rpx;
						color: #A4A4A4;
					}
				}
			}
		}
	}
</style>
